<template>
	<view class="calendar-content" v-if="showCalendar">
		<!-- <text class="example-info">日历组件可以查看日期，选择任意范围内的日期，打点操作。常用场景如：酒店日期预订、火车机票选择购买日期、上下班打卡等。</text> -->
		<!-- <uni-section title="插入模式" type="line"></uni-section> -->
		<view class="calendar">
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>
		<!-- <uni-section class="hideOnPc" title="弹出模式" type="line"></uni-section> -->
		<!-- <view class="example-body hideOnPc">
			<button class="calendar-button" type="button" @click="open">打开日历</button>
		</view>
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
		 :endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/> -->
		<view class="content">
			<block v-for="item in calendarList" :key="item.id">
				<view v-if="currentDate==item.date" class="row">
					<!-- <view class="r1">
						<text>时间：{{item.time}}</text>
						<text>地址：{{item.address}}</text> 
					</view>
					<view class="r1">
						<text>客户：{{item.name}}</text>
						<text>电话：{{item.phone}}</text>
					</view> -->
					<view class="item-row">
						<image src="../../static/uni.png" mode="" class="img"></image>
						<view class="right">
							<text class="name">{{ item.username }}</text>
							<text class="time"><text class="iconfont icon-zidonghexiao"></text> {{item.address}}</text>
							<text class="time"><text class="iconfont icon-time"></text> {{item.time}}</text>
						</view>
					</view>
				</view>
			</block>
			<!-- <text>08:00-12:00</text> <text>西安市</text> -->
		</view>
	</view>
</template>

<script>
	import { GetOrderList, GetPreorderDate } from '../../api/index.js'
	import moment from 'moment'
	function getDate(date, AddDayCount = 0) {
			if (!date) {
				date = new Date()
			}
			if (typeof date !== 'object') {
				date = date.replace(/-/g, '/')
			}
			const dd = new Date(date)
	
			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			return {
				fullDate: y + '-' + m + '-' + d,
				year: y,
				month: m,
				date: d,
				day: dd.getDay()
			}
		}
	export default {
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				calendarList:[],
				currentDate:moment().format('YYYY-MM-DD'),
				infoText:'预约'
			};
		},
		// watch:{
		// 	'info.selectted':(n,o)=>{
		// 		let list=this.calendarList.filter(item=>item.date==this.currentDate)
		// 		console.log(list,'mmmm')
		// 		if(list.length>=2){
		// 			this.infoText= '已满'
		// 		}else{
		// 			this.infoText= 'kkk'
		// 		}
				
		// 	}
		// },
		onLoad() {
			// this.getPreorderDate(this.currentDate)
			this.getOrderList()
		},
			onReady() {
					this.$nextTick(() => {
						this.showCalendar = true
					})
					// TODO 模拟请求异步同步数据
					// setTimeout(() => {
					// 	this.info.date = getDate(new Date(),-30).fullDate
					// 	this.info.startDate = getDate(new Date(),-60).fullDate
					// 	this.info.endDate =  getDate(new Date(),30).fullDate
					// 	this.info.selected = [{
					// 			date: getDate(new Date(),-3).fullDate,
					// 			info: '打卡'
					// 		},
					// 		// {
					// 		// 	date: getDate(new Date(),-2).fullDate,
					// 		// 	info: '签到',
					// 		// 	data: {
					// 		// 		custom: '自定义信息',
					// 		// 		name: '自定义消息头'
					// 		// 	}
					// 		// },
					// 		// {
					// 		// 	date: getDate(new Date(),-1).fullDate,
					// 		// 	info: '已打卡'
					// 		// }
					// 	]
					// }, 2000)
					// this.getPreorderDate(this.currentDate)
				},
				methods: {
					async getOrderList() {
						const {data:res} = await GetOrderList(4)
						console.log(res,'orderlist')
						const group = res.data.reduce((group,item)=>{
							if(!group[item.date]){
								group[item.date]=[]
							}
							group[item.date].push(item)
							return group
						},{})
						
						console.log(group,'group')
						let a=''
						let b=''
						for(let v in group){
							console.log(v,group[v])
							this.info.selected.push({date:v,info:group[v].length>=2?'已满':'预约'})
								
							console.log(this.info.selected,'this.info.selected')
						}
						this.calendarList = res.data
						res.data.forEach(item=>{
							console.log(item,'item')
							this.info.selected = [...this.info.selected,{
									date: item.date,
									info: '预约'
								}]
						})
						
					},
					open() {
						this.$refs.calendar.open()
					},
					close(){
						console.log('弹窗关闭');
					},
					change(e){
						this.currentDate = e.fulldate
					},
					changes(e) {
						console.log('change 返回:', e)
						this.currentDate = e.fulldate
						// 模拟动态打卡
						// if (this.info.selected.length > 30) return
						console.log(this.info.selected,'qqqq')
						// this.info.selected.push({
						// 	date: e.fulldate,
						// 	info: this.infoText
						// })
						this.getPreorderDate(e.fulldate)
						console.log(new Date(),'aaa',moment().format('YYYY-MM-DD'))
					},
					
					confirm(e) {
						console.log('confirm 返回:', e)
					},
					monthSwitch(e) {
						console.log('monthSwitchs 返回:', e)
						// this.calendarList = []
					},
					
					// async getPreorderDate(date){
					// 	// let date = '2024-05-29'
					// 	const { data:res } = await GetPreorderDate({hid:1,date})
					// 	console.log(res,'date')
					// 	let ress = res.data.filter(item=>item.date==this.currentDate)
					// 	this.info.selected = res.data.map(item=>{
					// 		if(ress.length>=2){
					// 			let obj = {
					// 				date:item.date,
					// 				info:'预约满'
					// 			}
					// 			return obj
					// 		}else{
					// 			let obj = {
					// 				date:item.date,
					// 				info:'预约'
					// 			}
					// 			return obj
					// 		}
							
					// 		console.log(obj)
							
					// 	})
					// 	console.log(this.info.selected,'f')
					// 	this.calendarList = res.data
					// 	console.log(this.calendarList,'calendarList')
						
					// }
					
					
					// async getPreorderDate(date){
					// 	// let date = '2024-05-29'
					// 	const { data:res } = await GetPreorderDate({hid:1,date})
					// 	console.log(res,'date')
						
					// 	let ress = res.data.filter(item=>item.date==this.currentDate)
					// 	console.log(ress,'ress')
					// 	this.info.selected = ress.map(item=>{
					// 		let obj={date:item.date,info:ress.length>=2?'已满':'预约'}
					// 		return obj
							
					// 	})
					// 	this.calendarList = res.data
					// 	// this.info.selected = res.data?.map(item=>{
					// 	// 	let obj = {
					// 	// 		date:item.date,
					// 	// 		info:'预约'
					// 	// 	}
					// 	// 	console.log(obj)
					// 	// 	return obj
					// 	// })
					// 	// console.log(this.info.selected,'f')
					// 	// this.calendarList = res.data
					// 	// console.log(this.calendarList,'calendarList')
						
					// }
					
					async getPreorderDate(date){
						// let date = '2024-05-29'
						const { data:res } = await GetPreorderDate({hid:1,date})
						console.log(res,'date')
						// let ress = res.data.filter(item=>item.date==this.currentDate)
						const group = res.data.reduce((group,item)=>{
							if(!group[item.date]){
								group[item.date]=[]
							}
							group[item.date].push(item)
							return group
						},{})
						
						console.log(group,'group')
						let a=''
						let b=''
						for(let v in group){
							console.log(v,group[v])
							this.info.selected.push({date:v,info:group[v].length>=2?'已满':'预约'})
								
							console.log(this.info.selected,'this.info.selected')
						}
					
					
						// console.log(this.info.selected,'f')
						this.calendarList = res.data
						console.log(this.calendarList,'calendarList')
						
					}
					
					
					
				}
	}
</script>

<style lang="scss">
.calendar-content{
	.calendar{
		
	}
	.content{
		width: 100%;
		text-align: center;
		padding: 50rpx;
		box-sizing: border-box;
		
		.row{
			width: 100%;
			margin: 20rpx auto;
			// display: flex;
			// margin: 0 auto;
			// justify-content: center;
			// .r1{
			// 	display: flex;
			// 	justify-content: space-between;
			// }
			.item-row{
				width: 100%;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				border-left: 2px solid #1afa29;
				background: #fff;
				padding: 15rpx;
				box-sizing: border-box;
				.img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.right{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.name{
						font-weight: bold;
					}
					.iconfont{
						margin-right: 6rpx;
					}
					
				}
			}
		}
	}
}
</style>
